<html>
    <head>
        <meta charset="utf-8">
        <title>GeoIP定位</title>
        <!-- leaflet的css样式 -->
        <link rel="stylesheet" href="../lib/leaflet.css" />
        <!-- leaflet的js库 -->
        <script type="text/javascript" src="../lib/leaflet-src.js"></script>

        <!-- 添加leaflet-geoip.js的引用 -->
        <script type="text/javascript" src="../lib/plugins/geoencoding/leaflet-geoip.js"></script>


        <!-- 地图容器样式 -->
        <style>
            #mapDiv{
                width: 100%;
                height: 100%;
            }
        </style>

        <script type="text/javascript">
            var map = null; 

            function init(){

                map = L.map("mapDiv", {
                    layers:[
                        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png')
                    ],
                    center: [0,0],
                    zoom: 1,
                });
            }

            function onGeoIP(){
                //L.GeoIP.centerMapOnPosition(map,13);
                // 获取IP地址的地理坐标
                var position = L.GeoIP.getPosition();
                // 在文本框里显示坐标值
                document.getElementById("xy").value = position.lat + "," + position.lng;
                // 将改坐标定位为地图中心
                map.setView(position, 13);
                
            }
        </script>
            
    </head>
    <body onload="init()">
        <input type="button" value="GeoIP定位" onclick="onGeoIP()">
        <input type="input" value="" size="20" id="xy">
        <!--地图的容器-->
        <div id="mapDiv"></div>
    </body>
</html>



